<template>
    <div>
      <el-form>
        <el-form-item label="订单编号" prop="orderNum">
          <el-input v-model="searchForm.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="业务日期" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-date-picker placeholder="选择时间" v-model="searchForm.date2" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="单据状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择单据状态">
            <el-option label="状态1" value="staus1"></el-option>
            <el-option label="状态2" value="status2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" prop="supply">
          <el-input v-model="searchForm.supply"></el-input>
        </el-form-item>
        <el-form-item label="确认状态" prop="sureStatus">
          <el-select v-model="searchForm.sureStatus" placeholder="请选择确认状态">
            <el-option label="状态1" value="staus1"></el-option>
            <el-option label="状态2" value="status2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">导出</el-button>
          <el-button type="primary" @click="submitForm('searchForm')">查询</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="block">
        <p>返回200条数据 (100张)</p>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100">
        </el-pagination>
      </div>

      <div class="table-box">
        <el-table
          :data="tableData"
          style="width: 100%;">
          <el-table-column width="120" prop="number" label="订单编号"></el-table-column>
          <el-table-column width="120" prop="date" label="订单日期"></el-table-column>
          <el-table-column width="120" prop="classify" label="业务类型"></el-table-column>
          <el-table-column width="120" prop="supply" label="供应商名称"></el-table-column>
          <el-table-column width="120" prop="documentStatus" label="单据状态"></el-table-column>
          <el-table-column width="120" prop="purchase" label="采购组织"></el-table-column>
          <el-table-column width="120" prop="consignee" label="收货组织"></el-table-column>
          <el-table-column width="120" prop="settle" label="结算组织"></el-table-column>
          <el-table-column width="120" prop="buyer" label="采购员"></el-table-column>
          <el-table-column width="120" prop="documentattached" label="采购跟单"></el-table-column>
          <el-table-column width="120" prop="storehouse" label="仓库"></el-table-column>
          <el-table-column width="120" prop="materielNum" label="物料编码"></el-table-column>
          <el-table-column width="120" prop="materielName" label="物料名称"></el-table-column>
          <el-table-column width="120" prop="Specifications" label="规格"></el-table-column>
          <el-table-column width="120" prop="Company" label="单位"></el-table-column>
          <el-table-column width="120" prop="quantityOrder" label="订货数量"></el-table-column>
          <el-table-column width="120" prop="quantityReceiving" label="收货数量"></el-table-column>
          <el-table-column width="120" prop="quantityWarehousing" label="入库数量"></el-table-column>
          <el-table-column width="120" prop="quantityReturn" label="退货数量"></el-table-column>
          <el-table-column width="120" prop="quantityNotReceiving" label="未收货数量"></el-table-column>
          <el-table-column width="120" prop="quantityNotWarehousing" label="未入库数量"></el-table-column>
        </el-table>
      </div>
    </div>
</template>

<script>
export default {
  name: 'order',
  data () {
    return{
      searchForm:{
        orderNum: '',
        date1: '',
        date2: '',
        status: '',
        supply: '',
        sureStatus: '',
      },
      currentPage: 1,
      tableData:[
        {
          number: '1234',
          date: '2020-04-12',
          classify: '业务类型',
          supply: '供应商名称',
          documentStatus: '单据状态',
          purchase: '采购组织',
          consignee: '收货组织',
          settle: '结算组织',
          buyer: '采购员',
          documentattached: '采购跟单',
          storehouse: '仓库',
          materielNum: '物料编码',
          materielName: '物料名称',
          Specifications: '规格',
          Company: '单位',
          quantityOrder: '订货数量',
          quantityReceiving: '收货数量',
          quantityWarehousing: '入库数量',
          quantityReturn: '退货数量',
          quantityNotReceiving: '未收货数量',
          quantityNotWarehousing: '未入库数量',
        }
      ]
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped="scoped">
</style>
